<template>
  <div class="container">
    <el-form label-width="100px">
      <el-form-item label="头像">
        <span v-if="isEdit" class="sign">(建议大小 100*100)</span>
        <el-upload
          :disabled="!isEdit"
          class="avatar-uploader"
          :action="upload_url"
          accept="image/*"
          :headers="Authorization"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload"
        >
          <img v-if="user_info.avatar" :src="user_info.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"/>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户昵称" prop="loginName">
        <el-input
          v-model="user_info.loginName"
          class="el-input-width"
          :disabled="!isEdit"
          placeholder="用户昵称"
        />
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input
          v-model="user_info.realName"
          class="el-input-width"
          :disabled="!isEdit"
          placeholder="真实姓名"
        />
      </el-form-item>
      <el-form-item label="公司信息" prop="position">
        <el-input
          v-model="user_info.companyInfo.name"
          :disabled="true"
          class="el-input-width"
          placeholder="公司信息"
        />
      </el-form-item>
      <el-form-item label="职位信息" prop="position">
        <el-input
          v-model="user_info.position"
          :disabled="!isEdit"
          class="el-input-width"
          placeholder="职位信息"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input
          v-model="user_info.mobile"
          :disabled="!isEdit"
          auto-complete="off"
          class="el-input-width"
        />
      </el-form-item>
      <el-form-item>
        <el-button v-if="isEdit" type="primary" :loading="loading" @click="submit">保存</el-button>
        <el-button v-else type="primary" @click="edit">编辑</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
import { operator_update } from '@/api/system';
import { upload_url } from '@/api/file';
import { getToken } from '@/utils/auth';
export default {
  data() {
    return {
      loading: false,
      isEdit: false,
      Authorization: {
        Authorization: getToken()
      },
      upload_url: upload_url,
      rules: {
        loginName: [
          { required: true, message: '请输入登录ID', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' },
          { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入您的手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(['user_info'])
  },
  methods: {
    ...mapMutations({
      setUser: 'user/SET_USERINFO'
    }),
    uploadSuccess(res, file) {
      this.information.logoUrl = res.data.url;
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!');
      }
      return isLt2M;
    },
    edit() {
      this.isEdit = !this.isEdit;
    },
    async submit() {
      try {
        this.loading = true;
        await operator_update(this.user_info);
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        console.log(this.user_info);
        this.setUser(this.user_info);
        this.loading = false;
      } catch (error) {
        console.error(error);
        this.loading = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  padding: 20px;
}
</style>
